<template>
  <div class="ddd">
    <el-col
        :lg="3"
        :xs="12"
        :sm="12"
      >
        
      </el-col>
      <el-form :inline="true">
        <el-form-item label="选择用户获取广告点击">
          <el-select
          v-model="channel"
          style="width: 100%"
          filterable
          class="filter-item"
          @change="changeChannel"
        >
          <el-option key label="所有渠道" value />
          <el-option
            v-for="value in qudaoArr"
            :key="value"
            :label="value"
            :value="value"
          />
        </el-select>
        </el-form-item>
          <el-form-item label="ip/uv：">
              <el-input v-model="ip" placeholder="ip/uv" style="width:150px" />
          </el-form-item>
          <el-form-item label="广告点击量：">
            <el-input v-model="click" placeholder="点击量" style="width:150px" />
        </el-form-item>
            <el-form-item label="广告单价：">
            <el-input v-model="price" placeholder="单价" style="width:150px" />
        </el-form-item>
            <el-form-item>
            <el-button type="primary" size="large" @click="sub">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="s">
          <el-row>
            <el-col :span="3">收益：{{shoueyi}}  </el-col>
            <el-col :span="3">ip/uv点击率：{{dianjilv}} %</el-col>
            </el-row>
            
      </div>
     <el-table
      :data="l"
      highlight-current-row
      style="width: 100%"
      height="800px"
    >
    <el-table-column
        key="1"
        label="单价"
        align="center"
        prop="d"
        sortable="custom"
        min-width="120"
      >
      <template slot-scope="item">
          <div :class="item.row.lv > 100 ? 'g': 'r'">
              {{item.row.d}}
          </div>
          
      </template>
      </el-table-column>
      <el-table-column
        key="2"
        label="付给用户"
        align="center"
        prop="fu"
        sortable="custom"
        min-width="120"
      >
      <template slot-scope="item">
          <div :class="item.row.lv > 100 ? 'g': 'r'">
              {{item.row.fu}}
          </div>
          
      </template>
      </el-table-column>
      <el-table-column
        key="3"
        label="赚"
        align="center"
        prop="zhuang"
        sortable="custom"
        min-width="120"
      >
      <template slot-scope="item">
          <div :class="item.row.lv > 100 ? 'g': 'r'">
              {{item.row.zhuang}}
          </div>
          
      </template>
      </el-table-column>
      <el-table-column
        key="4"
        label="回报率"
        align="center"
        prop="lv"
        sortable="custom"
        min-width="120"
      >
      <template slot-scope="item">
          <div :class="item.row.lv > 100 ? 'g': 'r'">
              {{item.row.lv}} %
          </div>
          
      </template>
      </el-table-column>
     </el-table>
  </div>
</template>
<script>
import {
  getChannelNameList,
} from "@/api/admin/admin";
import { fetchList } from '@/api/admin/online'
export default {
  data() {
      return {
        ip: "",
        click: "",
        price: "",
        list: [1,2,3,4,5,6,7,8,9,10,15,
        20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80,85,90,95,100,105,110,115,120,125,130,135,140,145, 150, 160,
        170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310,
        320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420, 430, 440, 450,460,470,480,490,500,510,520,530,540,550,560,570,580,590,600,650,700,750,800
        ],
        l: [],
        shoueyi: 0,
        dianjilv: 0,
        channel:'',
        qudaoArr: []
      }
  },
  mounted(){
    this.getChannelNameList()
    this.click = this.$route.query.click
  },
  methods: {
     //获取渠道列表
    getChannelNameList() {
      getChannelNameList().then((r) => {
        this.qudaoArr = r.DATA;
      });
    },
    //获取渠道点击
    changeChannel() {
      let listQuery = {
        page: 1,
        limit: 20,
        qudao:this.channel
      }
      fetchList(listQuery).then(response => {
        
        this.total = response.DATA.list.length
        if(this.total > 0) {
          this.click = response.DATA.list[0].ex
          this.ip = response.DATA.list[0].uv
        } else {
          this.$message.error('当前渠道无数据！')
          this.click = ''
        }
      })
    },
    sub() {
      this.l = [];
      let z = (this.click * this.price).toFixed();
      this.shoueyi = z;
      let lv = ((this.click / this.ip) * 100).toFixed(2);
      this.dianjilv = lv;
      for (let i = 0; i < this.list.length; i++) {
        let c_z = ((this.ip * this.list[i]) / 10000).toFixed();
        let s = (z - c_z).toFixed();
        let slv = ((s / c_z) * 100).toFixed(2);
        this.l.push({
          d: this.list[i],
          fu: c_z,
          zhuang: s,
          lv: slv,
        });
      }
    },
  },
}
</script>
<style>
.ddd{
    margin:20px;
    padding: 20px;
    background-color: white;
}
.g{
    color: green
}
.r{
    color: red
}
.s{
    font-size: 18px;
    font-weight: bold;
}
</style>
